<template>
  <div class="body_edu">
    <div class="centered_edu">
      <div class="education_content">
        <div class="image_container">
          <img v-if="studentData.image" :src="studentData.image" alt="Image Description">
          <img v-else src="https://img47.photophoto.cn/20180426/0470063083396323_s.jpg" alt="">
        </div>
        <div class="text_container">
          <h5>Cherish(珎){{ studentData.name }}</h5>
          <h5>探索前沿，
            精进技能，学程助力您的专业成长！ </h5>
        </div>
      </div>

      <!-- 报名单列表 -->
      <div class="notice-title">我的报名单</div>
      <div class="product-list">
        <img v-if="orderData.length === 0" src="../assets/nodata.jpg" alt="no data image" class="no-data-image" />
        <div class="product-item" v-for="(item) in orderData" :key="item.id" @click="goToProductDetail(item.id)">
          <img :src="item.product.image" class="product-image" />
          <div class="product-info">
            报名单号:<span class="product-name">{{ item.orderId }}</span><br>
            报名课程:<span class="product-name">{{ item.product.name }}</span><br>
            价格:<span class="product-price">￥{{ item.product.price }}</span>
          </div>
        </div>
      </div>
    </div>
    <home-view></home-view>
  </div>
</template>

<script>
import { jwtDecode } from 'jwt-decode';
import HomeView from '@/views/HomeView.vue';

export default {
  components: {
    HomeView,
    },
  data() {
    return {
      studentData: [],//学生数据
      orderData:[],
      productList: [
        // 这里是你的商品数据
      ],
    };
  },
  computed: {
   
  },
  methods: {
    //跳转报名单详情页面
    goToProductDetail(productId) {
      this.$message.error("该功能正在完善中");
    },

    // 跳转到报名单详情页面
    gotoProductDetail(noticeId) {
      this.$router.push(`/notice/${noticeId}`); // 使用vue-router实现路由跳转，假设公告详情页面的路由路径为/notice/:id
    },
  
  },

  mounted() {
    const jwt = localStorage.getItem('jwt');
      if (jwt) {
        const decoded = jwtDecode(jwt);
        const userId = decoded.id; // 确保你的token结构中有id字段
        this.$http.get("/api/students/queryOneStudentById/" + userId).then(response => {  /*刷新页面*/
            this.studentData = response.data.data;
        }).catch(() => {
            this.$message.error("请求错误");
        });
        this.$http.get("/api/orders/queryOneStudentOrder/" + userId).then(response => {  /*刷新页面*/
            this.orderData = response.data.data.rows;
        }).catch(() => {
            this.$message.error("请求错误");
        });
      }   
  },
};
</script>
  
<style>
@import "@/style/education.css";
</style>